<template>
  <el-dialog
    :title="orderInfo.type === 1 ? '订单详情' : '清分信息'"
    :visible.sync="orderInfo.show"
    width="1000px"
    center
    @open="openDialog"
  >
    <div class="dialog-content">
      <template v-if="orderInfo.type === 1">
        <el-row :gutter="20">
          <el-col :span="8"
            >订单号：<span>{{ orderInfo.rowData.order_No }}</span>
          </el-col>
          <el-col :span="8"
            >所属商户号：<span>{{
              orderInfo.rowData.merchant_Num
            }}</span></el-col
          >
          <el-col :span="8"
            >购买账号：<span>{{ orderInfo.rowData.mobile }}</span></el-col
          >
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"
            >商品名称：<span>{{ orderInfo.rowData.coupon_Name }}</span></el-col
          >
          <el-col :span="8"
            >订单金额：<span>{{
              orderInfo.rowData.actually_Money
            }}</span></el-col
          >
          <el-col :span="8"
            >订单状态：<span>{{
              statusEnum[orderInfo.rowData.status]
            }}</span></el-col
          >
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"
            >支付方式：<span>{{
              orderInfo.rowData.pay_Platform_Name
            }}</span></el-col
          >
          <el-col :span="8"
            >下单时间：<span>{{
              orderInfo.rowData.addTime | filterTime
            }}</span></el-col
          >
          <el-col :span="8"
            >首次核销：<span>{{
              orderInfo.rowData.is_Use ? "是" : "否"
            }}</span></el-col
          >
        </el-row>
      </template>
      <el-row class="table-title">
        <el-col :span="24">清分信息：</el-col>
      </el-row>
      <el-table
        :data="orderInfo.tableData"
        border
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="type" label="分润对象类型"> </el-table-column>
        <el-table-column prop="name" label="分润对象名称"> </el-table-column>
        <el-table-column prop="accountType" label="分润账户"> </el-table-column>
        <el-table-column prop="proportionType" label="分成方式">
        </el-table-column>
        <el-table-column prop="proportion" label="分成比例/金额">
        </el-table-column>
        <el-table-column prop="money" label="金额"> </el-table-column>
      </el-table>
      <div
        class="btn-wrap"
        v-if="showBtn && orderInfo.rowData.actually_Money > 0"
      >
        <el-button type="primary" @click="reClearDistribution"
          >重新清分</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      showBtn: false
    };
  },
  props: {
    orderInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    statusEnum: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    // 打开弹窗
    openDialog() {
      let addTime = new Date(this.orderInfo.rowData.addTime).getTime();
      let currentTime = new Date().getTime();
      // 有清分信息并且订单时间超过一个小时显示按钮
      if (
        this.orderInfo.rowData.status === 5 &&
        !this.orderInfo.tableData.length &&
        currentTime - addTime > 3600000
      ) {
        this.showBtn = true;
      } else {
        this.showBtn = false;
      }
    },
    // 重新清分
    reClearDistribution() {
      this.$confirm("确定要重新清分吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          try {
            const res = await this.$api.order.ReClearDistribution({
              order_No: this.orderInfo.rowData.order_No
            });
            if (res.code === 200) {
              this.$message({
                message: "清分成功！",
                type: "success"
              });
              this.showBtn = false;
            }
          } catch (error) {
            console.log(error);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.btn-wrap {
  margin-top: 20px;
  text-align: center;
}
.dialog-content {
  .el-row {
    line-height: 30px;
  }
  .table-title {
    margin-top: 30px;
  }
}
</style>
